<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		   	<style>
		   			button{
		   				width: 150px;
		   				height:50px;
		   			}
		   			div{
		   				width: 500px;
		   				height: 200px;
		   				background-color: #ffcc00;
		   				position: absolute;
		   				z-index: 100;
		   				display: none;
		   				line-height: 200px;
		   				text-align: center;
		   			}
		   		</style>
		  
		  <script src="js/jquery-1.11.1.js""></script>
	</head>
	<body>
		<button id="tab01" class="tab">tab01</button>
				<button id="tab02" class="tab">tab02</button>
				<button id="tab03" class="tab">tab03</button>
					<div class="t1"></div>
						<div class="t2"></div>
						<div class="t3"></div>
		
		  <script>
		   	$("#tab01").click(function(){
		   				$("#tab01").css("background-color","#ffcc00");
		   				$("#tab02").css("background-color","#f5f5f5");
		   				$("#tab03").css("background-color","#f5f5f5");
		   				$(".t1").text("tab文字内容一");
		   				$(".t1").css("display","block");
		   				$(".t2").css("display","none");
		   				$(".t3").css("display","none");
		   			});
		   			$("#tab02").click(function(){
		   				$("#tab02").css("background-color","#ffcc00");
		   				$("#tab01").css("background-color","#f5f5f5");
		   				$("#tab03").css("background-color","#f5f5f5");
		   				$(".t2").text("tab文字内容二");
		   				$(".t1").css("display","none");
		   				$(".t2").css("display","block");
		   				$(".t3").css("display","none");
		   			});
		   			$("#tab03").click(function(){
		   				$("#tab03").css("background-color","#ffcc00");
		   				$("#tab02").css("background-color","#f5f5f5");
		   				$("#tab01").css("background-color","#f5f5f5");
		   				$(".t3").text("tab文字内容三");
		   				$(".t1").css("display","none");
		   				$(".t2").css("display","none");
		   				$(".t3").css("display","block");
		   			});
		   			
		   		</script>
		  </script>
	</body>
</html>